<template>
  <div id="edit-role">
    <el-form :inline="false" :model="formData" ref="formData" :rules="validatorRules" label-width="100px">
      <el-form-item label="角色名称" maxlength="20"  prop="name">
        <el-input v-model="formData.name" maxlength="20"  placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="角色类型"  prop="roleType">
        <el-select v-model="formData.roleType" placeholder="请选择角色类型">
            <el-option v-for="item in roleTypeDict" :label="item.name" :value="item.code" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色描述"  prop="remark">
        <el-input v-model="formData.remark" maxlength="100" placeholder="请输入角色描述"></el-input>
      </el-form-item>
    </el-form>
    <div class="button-bar">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
      <el-button type="primary" @click="resetForm">清 空</el-button>
    </div>
  </div>
</template>
<script>

  export default {
    props:{
      editData:{
        type:Object,
        default:()=>{}
      },
      roleTypeDict:Array
    },
    data(){
      return{
        formData:{
          name:"",
          roleType:'',
          remark:"",
		  num:""
        },
      validatorRules:{
          name:[
            {required: true, message: '请输入', trigger: 'blur'},
          ],
		  roleType:[
		    {required: true, message: '请选择', trigger: 'blur'},
		  ],
      }
      }
    },
    watch:{
      editData(newVal){
        this.formData=newVal || {}
      }
    },
    methods:{
      submit(){
        var isValidate=false
        this.$refs.formData.validate((bool)=>{
            isValidate=bool
        })
        if(!isValidate){return}
        let submitData=this.formData
        submitData.moduleName="角色管理"
        this.$http.editRole(submitData)
        .then((res)=>{
            this.$message.success("操作成功！")
            this.resetForm()
            this.$emit("update",1)
            this.$emit('closeDialog',false)
        }).catch((err)=>{
             throw(err)
        })
        
      },
      resetForm(){
        this.$refs.formData.resetFields()
        for(var key in this.formData){
            this.formData[key]=""
        }
      },
      cancel(){
        this.resetForm()
        this.$emit("update")
        this.$emit('closeDialog',false)
      },
	  
	  

    },
    created(){
     
      
    },
  
  }
</script>
<style scoped lang='scss'>
	#edit-role{
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.el-form{
		flex:1;
	}
  .button-bar{
    text-align: center;
    margin-top: 20px;
	margin-bottom: 20px;
    .el-button{
      margin:0px 10px;
    }
  }
</style>
<style scoped lang="scss">
  //element样式微调
  /deep/ .el-form.el-form--inline{
    display: flex;
    flex-wrap: wrap;
    /deep/ .el-form-item{
      flex-basis: 40%;
      flex-grow: 1;
      margin: 10px;
      .el-form-item__label{
        flex-basis: auto;
      }
    }
  }


</style>



